
<template>
  <t-loading size="small" :loading="loading" show-overlay>
      <div class="info_mian">
        <div style="font-size: 24px;line-height: 1.8">
          <p>订单号：{{orderInfo.order_no}}</p>
          <p>订单标题：{{orderInfo.title}}</p>
          <p>订单内容：{{orderInfo.remark}}</p>

          <p>实付金额：<span style="color: #fb6a3c">￥{{orderInfo.amount}}&nbsp;&nbsp;<span style="font-size: 14px">已优惠￥{{orderInfo.yh_amount}}</span></span></p>
          <p>创建时间：{{orderInfo.create_at}}</p>
<!--          <p>优惠金额：<span style="color: #fb6a3c; text-decoration: line-through;">￥{{orderInfo.hx_amount}}</span></p>-->
        </div>

        <div style="text-align: center;">
          <img style="margin: auto;margin-bottom: 10px;width: 200px"  :src="orderInfo.ewm_url" alt="">
          <p>使用微信 扫码支付 支付即视为你同意 <t-link theme="primary" href="/yhxy" target="_blank">相关协议</t-link> 条例</p>
        </div>
      </div>
  </t-loading>


</template>
<script setup>
import {defineEmits, onUnmounted, ref} from "vue";
import {get,post} from "@/utils/api";
import config from "@/config";
import {MessagePlugin} from "tdesign-vue-next";

// eslint-disable-next-line vue/no-setup-props-destructure
const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});
console.log("item", item)
const loading = ref(true)


const orderInfo = ref({
  order_no: '',
  title:"",
  remark: '',
  amount: '',
  create_at:"",
  yh_amount:"",
  ewm_url:""

})
const timer = ref(null)
const emit = defineEmits(['close']);

post(config.createOrder,{
  id:item.id,
  type:item.type,
  num:item.num ?? 1
}).then(res=>{
  let data = res.data
  loading.value = false
  if(data.code===1){
    orderInfo.value = data.data

    timer.value =setInterval(() => {
       get(config.getOrderStatus,{
         id:orderInfo.value.id
       }).then(res=>{
         if(res.data.code===1){
           if(res.data.data===2){
             clearInterval(timer.value);
             timer.value = null;
             // 关闭弹窗
             emit('close');
           }
         }
       })
    }, 500);


  }else{
    MessagePlugin.error('订单创建失败')
  }
})

// 添加卸载生命周期钩子
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
})



</script>
<style scoped>
.info_mian{
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.info_font{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 60px;
}
.info_font h2{
  font-size: 24px;
  font-weight: 600;
}
.info_font p{
  font-size: 12px;
  color: #adacac;
}
.guarder_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  background: linear-gradient(122deg, #cad1df 30.56%, #a3a9b5 73.87%);
  padding: 20px;
  border-radius: 10px;
}
.guarder_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guarder_title{
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  line-height: 1.8;
}
.guarder_time{
  font-size: 14px;
  color: #adacac;
}
.member_info_font{
  font-size: 14px;
  color: #adacac;
}
</style>
